<template>
    <el-container style="height: 100%">
        <el-header style="height: 50px;padding-top: 10px;padding-right: 7%">
            <el-button @click="refresh" icon="el-icon-refresh" circle type="primary"
                       style="float: right;"></el-button>

            <el-button @click.prevent="register" icon="el-icon-plus" type="primary" circle
                       style="float: right;margin-right: 1%"></el-button>
        </el-header>
        <el-main  :class="fitContent">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(card, index) in cardsData" :key="index"
                    style="">
                <modelCard :card="card" @getModel="getModel" style="margin:20px 19.5%;width: 70%; "></modelCard>
            </el-col>
        </el-main>
        <el-footer style="text-align: center;height: 30px">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNo"
                    :page-sizes="[8, 16, 24, 32]"
                    :page-size="pageSize"
                    background
                    layout="prev, pager, next"
                    :total=this.totalCount>
            </el-pagination>
        </el-footer>
        <register-dialog v-on:refresh="refresh"></register-dialog>
        <modelInfoDialog></modelInfoDialog>
    </el-container>
</template>

<script>
    import registerDialog from "./registerDialog.vue"
    import modelInfoDialog from '../space/modelInfoDialog'
    import modelCard from '../space/modelCard'

    export default {
        name: "personalModel",
        components: {
            modelCard,
            registerDialog,
            modelInfoDialog,
        },
        data() {
            return {
                fileList: [],
                totalCount: 0,
                pageSize: 8,
                pageNo: 1,
                cardsData: {},
            };
        },
        computed: {
            fitContent() {
                if (window.screen.height >= 1000) {
                    return 'longPersonalModel'
                } else {
                    return 'shortPersonalModel'
                }
            }
        },
        watch: {
            pageSize() {
                this.getModel();
            },
            pageNo() {
                this.getModel();
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.pageNo = val;
            },
            register() {
                let registerVisible = {
                    visible: true,
                };
                this.$Bus.$emit('registerVisible', registerVisible);
            },
            refresh() {
                this.cardsData = null;
                this.getModel();
            },

            getModel() {
                let that = this;
                let url = this.$URL.parallelListUrl + this.pageSize + '&pageNo=' + this.pageNo;
                // let url = 'http://192.168.1.5:9000/dbfg/parallel/get?pageSize=' + this.pageSize + '&pageNo=' + this.pageNo;
                this.$axios.get(url).then(res => {
                    if (res.code === 200) {
                        that.cardsData = res.body.result;
                        for (let card of that.cardsData) {
                            card.deleteShow = true;
                        }
                        that.totalCount = res.body.totalCount;
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.data.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message({
                        type: 'warning',
                        message: '模型获取失败！'
                    })
                })
            }
        },
        created() {
            this.getModel();
        }
    }
</script>

<style>
    input[type=file] {
        display: none;
    }
    .longPersonalModel {
        min-height: 850px;
    }

    .shortPersonalModel {
        min-height:500px;
    }

</style>